<template>
	<view class="page">
		<pageheader :setting="settingdata"></pageheader>
		<view class='form form_table'>
			<!-- 			<view class="table_head flex_align">
				<view class="li_check" v-show="!is_batch">
				</view>
				<view class="img_box">
				</view>
				<view class="li" v-for="(item,index) in spec_attr" :key="index">
					{{item.group_name}}
				</view>
				<view class="info_price">
					综合信息
				</view>
			</view> -->
			<view class="table_line flexs" v-for="(item,index) in spec_list" :key="index">
				<view class="li_check">
					<u-checkbox @change="checkboxChange" v-model="item.is_select"
						style="position: absolute;top:25%;left: 20%;" active-color="#19BE6B" :name="index">
					</u-checkbox>
				</view>
				<view class="img_box">
					<image :src="item.image" mode="aspectFill" class="table_img" @click="show_img(item.image)"></image>
				</view>
				<view class="li">
					{{item.spec_value}}
				</view>
				<view class="info_price ">
					<view class="price">
						<view class="">
							市场价：{{item.money}}
						</view>
						<view class="">
							成本价：{{item.cost_price }}
						</view>
						<view class="">
							库存：{{item.stock}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot_box">
			<view class="li_check">
				<u-checkbox @change="allChange" v-model="all_select" active-color="#19BE6B">全选</u-checkbox>
			</view>
			<view class="box">
				<view class="" style="margin-top: 25rpx;">
					<u-radio-group v-model="radiovalue" @change="radioChange" :wrap="true" active-color="#19BE6B">
						<view class="flex_align">
							<view class="box flex_align">
								<u-radio :name="1">
									<text style="font-size: 24rpx;">新增库存</text>
								</u-radio>
								<view class="pob flex_align">
									<input :disabled="radiovalue==2" type="number" :value="addstock" @input="changinput"
										class="radinput" />
									<text>件</text>
								</view>
							</view>
							<view class="box flex_align">
								<u-radio :name="2">
									<text style="font-size: 24rpx;">减少库存</text>
								</u-radio>
								<view class="pob flex_align">
									<input :disabled="radiovalue==1" type="number" :value="delstock" @input="changinput"
										class="radinput" />
									<text>件</text>
								</view>
							</view>
						</view>
					</u-radio-group>
				</view>
			</view>
			<view class="submitbox" @click="submit">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				settingdata: {
					name: '库存设置',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "sku_set"
				},

				radiovalue: 0,
				spec_attr: [],
				spec_list: [],
				all_select: false,
				good_id: '',
				addstock: '',
				delstock: '',
				can_sub: true,
			};
		},

		onLoad(e) {
			this.good_id = e.id
			this.getdata(e.id)


		},
		methods: {

			changinput(e) {

				if (this.radiovalue == 1) {
					this.addstock = e.detail.value
				} else {
					this.spec_list.some((item) => {
						if (item.stock < e.detail.value) {
							uni.showToast({
								title: item.spec_value + "库存不够减",
								icon: "none"
							})
							this.can_sub = false
							return true
						}
					})
					this.delstock = e.detail.value
				}

			},
			getdata(id) {
				this.$api.get('getskulist', {
					id: id
				}).then(res => {
					console.log(res)
					this.spec_list = res
					this.spec_list.forEach((item, index) => {
						this.spec_list[index].is_select = false
						this.judge_all()
					})
				})
			},
			submit() {
				let good_id = []
				this.spec_list.forEach((item, index) => {
					if (item.is_select) {
						good_id.push(item.id)
					}
				})

				if (this.radiovalue == 2) {
					this.spec_list.some((item) => {
						if (item.stock < this.delstock) {
							uni.showToast({
								title: item.spec_value + "库存不够减",
								icon: "none"
							})
							this.can_sub = false
							return true
						}
					})
				}

				if (this.radiovalue != 0) {
					if (this.can_sub) {
						if (good_id.length > 0) {
							let info = {
								spec_ids: good_id.join(','),
								stock: this.radiovalue == 1 ? this.addstock : this.delstock,
								change_type: this.radiovalue
							}

							if (!info.stock) {
								wx.showToast({
									title: '请输入新增或减少库存',
									icon: 'none',
								})
							} else {
								this.$api.post('changestock', info).then(res => {
									uni.showModal({
										title: '修改成功',
										content: '是否继续修改',
										confirmText: '是',
										cancelText: '否',
										success: (res) => {
											if (res.confirm) {
												this.getdata(this.good_id)
											} else if (res.cancel) {
												uni.navigateBack({
													delta: 1,
												})
											}
										}
									});


								})
							}
						} else {
							wx.showToast({
								title: '请选择规格',
								icon: 'none',
							})
						}

					} else {
						this.can_sub = true
					}

				} else {
					wx.showToast({
						title: '请选择新增或减少',
						icon: 'none',
					})
				}
			},
			radioChange(e) {

				if (this.radiovalue == 1) {

					this.delstock = ''
				} else {
					this.addstock = ''
				}

			},

			allChange(e) {
				this.spec_list.forEach((item, index) => {
					this.spec_list[index].is_select = e.value
				})
			},

			checkboxChange(e) {
				this.spec_list[e.name].is_select = e.value
				this.spec_list = [...this.spec_list]
				this.judge_all()

			},
			judge_all() {
				console.log(this.all_select)
				let speclist = [...this.spec_list]
				this.all_select = speclist.every(item => {
					console.log(item.is_select)
					return item.is_select
				})
				console.log(this.all_select)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.foot_box {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 60rpx;
	}

	.submitbox {
		width: 600rpx;
		height: 80rpx;
		border-radius: 45rpx;
		background: linear-gradient(86deg, #38BE8C, #05ADBB);
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 28rpx;
		margin: 0 auto;
	}



	.page {
		background-color: #f1f2f6;
		min-height: 100vh;
		padding-bottom: 460rpx;
	}

	.li_check {
		padding: 25rpx;
	}

	.box {
		margin: 0 25rpx 20rpx;
		font-size: 24rpx;
		position: relative;
		width: 300rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			height: 60rpx;
			line-height: 60rpx;
		}

		.goodsku {
			height: 100%;
			padding: 20rpx 30rpx;
			background: #fff;
		}

		.pob {
			position: absolute;
			left: 155rpx;
		}

		.radinput {
			background: #f1f2f6;
			height: 60rpx;
			width: 100rpx;
			margin-right: 15rpx;
		}

		.rigth {
			margin-left: 50rpx;
			flex: 1;
		}
	}

	.form_table {
		overflow-x: auto;
		background-color: #FFFFFF;
		width: 710rpx;
		margin: 20rpx auto;

		.table_head {
			text-align: center;

			.li_check {
				min-width: 80rpx;
				height: auto;
				position: relative;
			}

			.img_box {
				min-width: 150rpx;
				height: 100rpx;

			}

			.li {
				min-width: 150rpx;
			}

			.info_price {
				min-width: 300rpx;
			}
		}

		.flexs {
			display: flex;
			align-items: center;
		}

		.li_check {
			padding: 20rpx;
		}

		.table_line {
			width: 100%;
			text-align: center;
			min-height: 150rpx;

			// border-top: 1rpx solid #B5B5B5;
			.li_check {
				min-width: 50rpx;
				height: auto;
				position: relative;
			}

			.img_box {
				min-width: 150rpx;
				position: relative;

				.table_img {
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: -50rpx;
					margin-left: -50rpx;
				}
			}

			.li {
				min-width: 150rpx;
				height: auto;
				position: relative;
			}

			.li_style {
				width: 100%;
				position: absolute;
				display: inline-block;
				top: 25%;
				left: 0;
			}

			.info_price {
				min-width: 300rpx;
				height: auto;
				position: relative;

				.price_box {
					height: 120rpx;
					position: absolute;
					top: 50%;
					margin-left: 40rpx;
					margin-top: -60rpx;
					font-size: 22rpx;

					.price {
						min-width: 220rpx;
					}
				}
			}
		}
	}
</style>
